<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url('images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg');
            background-size: cover;
        }
        
        div {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            filter: blur(5px);
            background: url('images/4e553f0f566c8fd27f77cf8537de376e0dd237f3.jpg');
            background-size: cover;
            /* transition: all .05s ease; */
        }
    </style>

</head>

<body>

    <div>


    </div>


</body>

<script>
    var div = document.getElementsByTagName('div');
    var boyds = document.body;
    window.addEventListener('mousemove', function(e) {
        if (e.pageX < 1200 && e.pageX > 0) {
            div[0].style.width = e.pageX + 'px';
        } else {
            div[0].style.background = 'url(images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg)';
            boyds.style.background = 'url(images/4e553f0f566c8fd27f77cf8537de376e0dd237f3.jpg)';
            boyds.style.transition = 'background 1s ease';
            div[0].style.transition = 'background 1s ease';
            boyds.style.backgroundSize = ' cover';
        }
        if (e.pageX == 0) {
            div[0].style.background = 'url(images/4e553f0f566c8fd27f77cf8537de376e0dd237f3.jpg)';
            boyds.style.background = 'url(images/3aa3b1a332986b5744d7bbb4a82cab443cd71a1c.jpg)';
            div[0].style.backgroundSize = 'cover';
            boyds.style.backgroundSize = 'cover';
            boyds.style.transition = 'background 1s ease';
            div[0].style.transition = 'background 1s ease';
        }

    });
</script>

</html>